<template>
  <div class="page">
    <go-back v-if="$route.query.isLink"></go-back>
    <!-- 查询条件 -->
    <el-row :gutter="10" style="margin: 20px 0px">
      <el-col :span="25">
        <el-date-picker
          v-model="selectedDate"
          type="daterange"
          size="small"
          width="100%"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          @change="handelChangeDate"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <el-select
          size="small"
          v-model="queryParam.areaCode"
          placeholder="地区"
        >
          <el-option
            v-for="item in areaOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-cascader
          :options="statusOptions"
          v-model="bodyindustryStr"
          size="small"
          :props="{ checkStrictly: true }"
          placeholder="请选择单位业态"
          clearable
          @change="onBodyIndustryStr"
        >
        </el-cascader>
      </el-col>
      <el-col :span="3">
        <el-select
          size="small"
          v-model="queryParam.category"
          placeholder="短信类别"
          clearable
        >
          <el-option
            v-for="item in msgTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="margin: 20px 0px">
      <el-col :span="3">
        <el-input
          maxlength="50"
          size="small"
          v-model="queryParam.searchOne"
          placeholder="人员姓名/手机号码"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="5">
        <el-input
          maxlength="50"
          size="small"
          v-model="queryParam.searchTwo"
          placeholder="企业单位名称/统一社会信用代码"
          clearable
        ></el-input>
      </el-col>
      <!-- <el-col :span="5">
        <el-cascader
          clearable
          placeholder="请选择标签类别"
          size="small"
          v-model="categoryStr"
          :options="bodyindustryList"
          @change="onCascaderChange"
          :props="{
            checkStrictly: true,
          }"
        ></el-cascader>
      </el-col> -->
      <el-col :span="3">
        <el-button type="primary" size="small" @click="handleQuery">
          查询
        </el-button>
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <el-table border stripe :data="tableData" style="width: 100%">
      <el-table-column
        prop="districtStreet"
        label="区域名称"
        align="center"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="单位业态"
        align="center"
        show-overflow-tooltip
        width="220px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.bodyIndustryRemarks">
            {{ scope.row.bodyIndustry }}-{{ scope.row.bodyIndustryRemarks }}
          </div>
          <div v-else>
            {{ scope.row.bodyIndustry }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="单位标签" align="center" width="220px">
        <template slot-scope="scope">
          <span v-if="scope.row.categoryOneAndTwo">
            {{ scope.row.categoryOneAndTwo }}
          </span>
          <span v-else>{{ scope.row.categoryOne }}</span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="unitName"
        label="单位名称"
        align="center"
        show-overflow-tooltip
        width="250px"
      >
      </el-table-column>
      <el-table-column
        prop="loginName"
        label="发送姓名"
        align="center"
        show-overflow-tooltip
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="loginMobile"
        label="发送号码"
        align="center"
        show-overflow-tooltip
        width="110px"
      >
      </el-table-column>
      <el-table-column
        prop="createDateTimeStr"
        label="发送时间"
        align="center"
        show-overflow-tooltip
        width="110px"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.createDateTimeStr || "--" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="category"
        label="短信类别"
        align="center"
        show-overflow-tooltip
        width="130px"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        label="发送内容"
        align="center"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="float: right; margin-top: 20px"
      @current-change="changeCurrentPage"
      :page-size="queryParam.pageSize"
      :current-page.sync="queryParam.pageIndex"
      background
      layout="total, prev, pager, next"
      :total="listTotal"
      v-if="listTotal > 0"
    >
    </el-pagination>
  </div>
</template>

<script>
import { bodyIndustryOptions, bodyIndustryLabel } from "@/utils/configure";
import { groupArea } from "@/api/modules/enterprise";
export default {
  data() {
    return {
      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   },
      // },
      areaOptions: [], //地区
      statusOptions: bodyIndustryOptions, //业态
      // bodyindustryList: bodyIndustryLabel.list, //标签类别(业态)
      msgTypeOptions: [
        { label: "食安考试提醒", value: "1" },
        { label: "身份证提醒", value: "2" },
        { label: "健康证明提醒", value: "3" },
        { label: "设置主体责任提醒", value: "4" },
      ], //短信类别
      selectedDate: [], //查询日期
      queryParam: {
        areaCode: "", //区域编码
        bodyIndustry: "", //主体业态
        bodyIndustryRemarks: "", //主体业态备注
        category: "", //短信类别0 默认查全部 1,填报核酸信息2,同步核酸信息3,单位状态变更4,人员状态变更
        // categoryOne: "", //食品生产单位、食品经营单位、第三方冷库、集中监管单位
        // categoryTwo: "", //食品生产单位，餐饮服务提供者、食品销售经营者、单位食堂，第三方冷库，集中监管仓，白名单企业
        pageIndex: 1, //开始页码
        pageSize: 20, //每页记录条数
        searchOne: "", //搜索(人员姓名/手机号码)
        searchTwo: "", //搜索(单位名称/社会信用代码)
        startDateCompletion: "", //开始时间(短信发送时间)
        endDateCompletion: "", //结束时间(短信发送时间)
      }, //查询参数

      // categoryStr: "", //标签类别
      bodyindustryStr: "", //单位业态
      tableData: [],
      listTotal: 0, //列表总条数
    };
  },
  created() {
    console.log(this.$route.query);

    this.queryParam.areaCode = this.$route.query.code || "320500";
    this.selectedDate = [
      this.$moment().subtract(6, "days").format("YYYY-MM-DD"),
      this.$moment().format("YYYY-MM-DD"),
    ];
    this.queryParam.startDateCompletion = this.selectedDate[0];
    this.queryParam.endDateCompletion = this.selectedDate[1];

    this.findAreaListNoParentByParentCode();
    this.getMessageRemindRecord();
  },
  mounted() {},
  methods: {
    //获取区域列表
    findAreaListNoParentByParentCode() {
      groupArea({
        params: {
          areaCode: this.queryParam.areaCode,
        },
      }).then((res) => {
        console.log("获取区域列表", res.data);
        this.areaOptions.push({
          label: res.data.areaName,
          value: res.data.areaCode,
        });
        res.data.children.forEach((item1) => {
          this.areaOptions.push({
            label: item1.areaName,
            value: item1.areaCode,
          });
        });
      });
    },

    //选择日期
    handelChangeDate() {
      console.log(this.selectedDate);
      this.queryParam.startDateCompletion = this.selectedDate[0];
      this.queryParam.endDateCompletion = this.selectedDate[1];
    },

    //查询
    handleQuery() {
      this.queryParam.pageIndex = 1;
      this.getMessageRemindRecord();
    },

    //分页
    changeCurrentPage(val) {
      this.queryParam.pageIndex = val;
      this.getMessageRemindRecord();
    },

    //获取短信提醒记录
    getMessageRemindRecord() {
      let params = JSON.parse(JSON.stringify(this.queryParam));

      if (params.category === "") {
        params.category = "0";
      }

      this.$http.getSsaMessageRemindRecord(params).then((res) => {
        console.log("短信提醒记录", res);
        const { code, data, msg } = res;
        if (code === 200) {
          this.tableData = data.list;
          this.listTotal = data.total;
        } else {
          this.$message.error(msg);
        }
      });
    },

    //选择单位标签
    // onCascaderChange(e) {
    //   if (e.length == 2) {
    //     this.queryParam.categoryOne = e[0];
    //     this.queryParam.categoryTwo = e[1];
    //   } else if (e.length == 1) {
    //     this.queryParam.categoryOne = e[0];
    //     this.queryParam.categoryTwo = "";
    //   } else {
    //     this.queryParam.categoryOne = "";
    //     this.queryParam.categoryTwo = "";
    //     this.categoryStr = "";
    //   }
    // },

    //选择单位业态
    onBodyIndustryStr(e) {
      if (e.length == 2) {
        this.queryParam.bodyIndustry = e[0];
        this.queryParam.bodyIndustryRemarks = e[1];
      } else if (e.length == 1) {
        this.queryParam.bodyIndustry = e[0];
        this.queryParam.bodyIndustryRemarks = "";
      } else {
        this.queryParam.bodyIndustry = "";
        this.queryParam.bodyIndustryRemarks = "";
        this.bodyindustryStr = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  padding: 10px 20px;
  /deep/.el-dialog__body {
    padding: 0px 20px;
    padding-bottom: 70px;
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
